<template>
	<view>
		<view v-if="tranStuts" class="popup_bj" :class="[popClass]" style="z-index: 1;" @animationend="popupAnimation">
		</view>
		<view class="trans-text" :style="{transform: `translateY(${transY}%)`,top:`${transTop}px`}" @click="showTrnas">
			<template v-if="classify === 'sort'">
				<view class="fs28 pt24 pb40">
					<view class="trans__item fsc">最新获取时间
						<uni-icons type="checkmarkempty" color="#FF7803" size="12" />
					</view>
					<view class="trans__item fsc">回收价由高到低</view>
					<view class="trans__item fsc">回收价由低到高</view>
				</view>
			</template>
			<template v-if="classify === 'filter'">
				<view class="filter-box">
					<view class="filter-item pt48">
						<view class="filter__title px30">赏品等级</view>
						<view class="filter__list pt8 flex_y flw pl30 pr20">
							<block v-for="(item,index) in list">
								<view class="filter__list__item fjc" :class="{active:index === 0}">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="filter-item pt48">
						<view class="filter__title px30">抽取方式</view>
						<view class="filter__list pt8 flex_y flw pl30 pr20">
							<block v-for="(item,index) in list2">
								<view class="filter__list__item fjc">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="filter-item pt48">
						<view class="filter__title px30">赏品状态</view>
						<view class="filter__list pt8 flex_y flw pl30 pr20">
							<block v-for="(item,index) in list3">
								<view class="filter__list__item fjc">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="filter-footer pt80 pb24 fsc px30">
						<view class="filter__btn left fjc">重置</view>
						<view class="filter__btn right fjc">确定</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			transTop: [Number, String],
			classify: {
				type: String,
				default: 'sort'
			}
		},
		data() {
			return {
				tranStuts: false,
				popClass: 'show-element',
				transY: -100,
				list: null,
				list2: null,
				list3: null,
			}
		},
		mounted() {
			this.list = new Array(15).fill({
				name: 'First赏'
			})
			this.list2 = new Array(5).fill({
				name: '抽奖所得'
			})
			this.list3 = new Array(2).fill({
				name: '现货'
			})
		},
		methods: {
			showTrnas() {
				if (this.tranStuts) {
					this.popClass = 'hidden-element'
				} else {
					this.popClass = 'show-element'
					this.tranStuts = !this.tranStuts
				}
				let test = {
					0: -100,
					'-100': 0
				}
				// this.transY = 0
				setTimeout(() => {
					this.transY = test[this.transY]
				}, 100)
			},
			popupAnimation() {
				if (this.popClass === 'hidden-element') {
					this.tranStuts = false
				}
				this.popClass = '' //清除动画
			},
		}
	}
</script>

<style lang="scss">
	.trans-text {
		position: fixed;
		top: 152rpx;
		left: 0;
		right: 0;
		background: #fff;
		// height: 328rpx;
		transition: all .7s;
		transform: translateY(-100%);
		z-index: 1;
		border-radius: 0 0 28rpx 28rpx;

		.trans__item {
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 32rpx;
		}
	}

	.filter-box {
		.filter__list__item {
			width: 132rpx;
			height: 68rpx;
			margin-right: 8rpx;
			margin-top: 8rpx;
			border-radius: 4px;
			background: #E2E0DF;
		}

		.active {
			color: #fff;
			background: #FF7803;
		}

		.filter__btn {
			width: 344rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.left {
			background: #E2E0DF;
		}

		.right {
			color: #fff;
			background: #FF7803;
		}
	}

	.popup_bj {
		position: fixed;
		top: 0;
		height: 0;
		right: 0;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.show-element {
		animation: appear .7s linear forwards;
	}

	.hidden-element {
		animation: appear .7s linear forwards reverse;
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>